<template>
  <div id="app">
    <button @click="changeImg">切换图片</button>
    <img-viewer :src="testImg" :zoomRatio="0.5" @on-zoom="handleZoom"></img-viewer>
  </div>
</template>

<script>
import ImgViewer from './components/ImgViewer'
import testImg1 from './assets/B5B3B902-98AD-4289-8445-3E9FCE9C8276_1_201_a.jpeg'
import testImg2 from './assets/IMG_8604.jpeg'

export default {
  name: 'App',
  components: {
    ImgViewer
  },
  data () {
    return {
      imgList: [testImg1, testImg2],
      testImg: testImg1
    }
  },
  methods: {
    changeImg () {
      this.testImg = this.imgList[1]
    },
    handleZoom (zoomFactor) {
      console.log('on-zoom', zoomFactor)
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
#app {
  width: 80%;
  height: 80%;
  margin: auto;
}
</style>
